<template>
  <page-header-wrapper>
    <template v-slot:content>
      <div class="page-header-content">
        <div class="content">
          <div class="content-title">
            {{ timeFix }}，{{ nickname }}<span class="welcome-text"></span>
          </div>
          <div> {{ postGroup }} | {{ user.dept.deptName }}</div>
        </div>
      </div>
    </template>
    <template v-slot:extraContent>
    </template>
    <!-- 致谢项目 -->
    <div>
      <a-row :gutter="16">
        <a-col :span="8">
          <a-card title="活动数量" :bordered="false">
            <p>{{ infoData.activityCount }}</p>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card title="用户数量" :bordered="false">
            <p>{{ infoData.userCount }}</p>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card title="徽章数量" :bordered="false">
            <p>{{ infoData.badgeCount }}</p>
          </a-card>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col
          style="padding: 0 12px;margin-top: 20px;"
          :xl="24"
          :lg="24"
          :md="24"
          :sm="24"
          :xs="24">
          <!-- 导航 -->
          <a-card title="活动记录" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
            <a-table :columns="columns" :data-source="dataList">
              <span slot="activityId" slot-scope="text, record">
                <div style="display: flex;align-items: center;justify-content: center">
                  <a-avatar shape="square" size="small" :src="record.activityImageUrl" v-viewer/>
                  <div style="margin-left: 10px">{{ record.title }}</div>
                </div>
              </span>
              <span slot="userId" slot-scope="text, record">
                <div style="display: flex;align-items: center;justify-content: center">
                  <a-avatar shape="square" size="small" :src="record.imageUrl" v-viewer/>
                  <div style="margin-left: 10px">{{ record.name }}</div>
                </div>
              </span>
            </a-table>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </page-header-wrapper>
</template>

<script>
import { pageActivityLog } from '@/api/system/activityLog'
import { timeFix } from '@/utils/util'
import { mapGetters } from 'vuex'
import { PageHeaderWrapper } from '@/components/ProLayout'
import { getUserProfile,getControlInfo } from '@/api/system/user'

export default {
  name: 'Index',
  components: {
    PageHeaderWrapper
  },
  data () {
    return {
      imageList: [],
      // 贡献者
      contributors: [
        {
          name: '',
          avatar: '',
          email: ''
        }
      ],
      columns: [
        {
          title: '活动',
          dataIndex: 'activityId',
          scopedSlots: { customRender: 'activityId' },
          ellipsis: true,
          align: 'center',
          width: '20%'
        },
        {
          title: '用户',
          dataIndex: 'userId',
          scopedSlots: { customRender: 'userId' },
          ellipsis: true,
          align: 'center'
        },
        {
          title: '信息',
          dataIndex: 'remark',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          ellipsis: true,
          align: 'center'
        },
      ],
      dataList:[],
      noTitleKey: 'XingHai',
      timeFix: timeFix(),
      infoData:{
        activityCount:0,
        userCount:0,
        badgeCount:0,
      },
      // 用户信息
      user: {
        dept: {
          deptName: ''
        }
      },
      roleGroup: {},
      postGroup: {},
      // 致谢项目
      projects: []
    }
  },
  computed: {
    ...mapGetters([
      'avatar',
      'nickname'
    ])
  },
  created () {
    this.getUser()
    this.getList()
    this.getData()
  },
  mounted () {
  },
  methods: {
    getData(){
      getControlInfo().then( response=>{
        this.infoData = response.data
      })
    },
    getList(){
      pageActivityLog({pageSize:10,pageNum:1}).then(response => {
        this.dataList = response.rows
      })
    },
    // 获取用户信息
    getUser () {
      getUserProfile().then(response => {
        this.user = response.data
        this.roleGroup = response.roleGroup
        this.postGroup = response.postGroup
      })
    },
    onSponsorTabChange (key, type) {
      this[type] = key
    }
  }
}
</script>

<style lang="less" scoped>
  @import "./index.less";
  blockquote {
    padding: 0 1em;
    color: #6a737d;
    border-left: 0.25em solid #dfe2e5;
  }
  .project-list {

    .card-title {
      font-size: 0;

      a {
        color: rgba(0, 0, 0, 0.85);
        margin-left: 12px;
        line-height: 24px;
        height: 24px;
        display: inline-block;
        vertical-align: top;
        font-size: 14px;

        &:hover {
          color: #1890ff;
        }
      }
    }

    .card-description {
      color: rgba(0, 0, 0, 0.45);
      height: 66px;
      line-height: 22px;
      overflow: hidden;
    }

    .project-item {
      display: flex;
      margin-top: 8px;
      overflow: hidden;
      font-size: 12px;
      height: 20px;
      line-height: 20px;

      a {
        color: rgba(0, 0, 0, 0.45);
        display: inline-block;
        flex: 1 1 0;

        &:hover {
          color: #1890ff;
        }
      }

      .download {
        color: rgba(0, 0, 0, 0.25);
        flex: 0 0 auto;
        float: right;
      }
    }

    .ant-card-meta-description {
      color: rgba(0, 0, 0, 0.45);
      height: 44px;
      line-height: 22px;
      overflow: hidden;
    }
  }

  .item-group {
    padding: 20px 0 8px 24px;
    font-size: 0;

    a {
      color: rgba(0, 0, 0, 0.65);
      display: inline-block;
      font-size: 14px;
      margin-bottom: 13px;
      width: 25%;
    }
  }

  .mobile {

    .project-list {

      .project-card-grid {
        width: 100%;
      }
    }

    .more-info {
      border: 0;
      padding-top: 16px;
      margin: 16px 0 16px;
    }

    .headerContent .title .welcome-text {
      display: none;
    }
  }

</style>
